<template>
  <div class="back">
  <el-menu
  
    :default-active="activeIndex"
    class="back"
    mode="horizontal"
    :ellipsis="false"
    @select="handleSelect"
    b
  >
  <el-menu-item index="0" >
      <img
        style="width: 100px"
        src="C:\Users\荣耀\OneDrive\桌面\项目\项目\ideavr_pro\public\R.png"
        alt="Element logo"
      />
      <p style="font-style: inherit;font-size: larger;font-weight:500;">牛逼vr</p>
    </el-menu-item>
    <el-menu-item index="0" >
     
    </el-menu-item>
    <div class="flex-grow" ></div>
    
    <el-menu-item index="1"><div class="front_style">首页</div></el-menu-item>
    <el-menu-item index="2"><div class="front_style">案例</div></el-menu-item>
    <el-menu-item index="3"><div class="front_style">社区</div></el-menu-item>
    <el-menu-item index="4"><div class="front_style">交流</div></el-menu-item>
    <el-menu-item index="5"><div class="front_style"> <router-link to="/login">登录</router-link></div></el-menu-item>
    <el-menu-item index="6"><div class="front_style">注册</div></el-menu-item>
  </el-menu>
</div>
</template>

<script lang="js" setup>
import { ref } from 'vue'

const activeIndex = ref('1')
const handleSelect = (key, keyPath) => {
  console.log(key, keyPath)
}
</script>

<style>
.flex-grow {
  flex-grow: 1;
  background-attachment: fixed;
  
}
.front_style{
font-size: small;
}
.back{
  background-color: green;
}

</style>
